import { userPowerMap, userSexMap } from "../../dict";
import styles from "../../index.module.less";
import { dicts, userFormState } from "../../store";
export default defineComponent({
  setup() {
    return () => (
      <>
        <div class={styles.user_detail}>
          {/* <div class={[styles.transform_status]}>
            <div class={styles.col}>
              <i>{$t("table8")}</i>
            </div>
            <div class={styles.col}>
              <i>{userFormState.conversion}</i>
              {renderIcon("icon-xiangyou")}
            </div>
          </div> */}
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table13")}：</i>
              <i>{userFormState.channel}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("table2")}：</i>
              <i>
                +{userFormState.mobile_area} {userFormState.mobile_number}
              </i>
            </div>
          </div>

          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table12")}：</i>
              <i>{userFormState.country}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("popular8")}：</i>
              <i>{getTimeByZone(userFormState.last_login_time as string)}</i>
            </div>
          </div>

          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table2")}：</i>
              <i>
                +{userFormState.mobile_area} {userFormState.mobile_number}
              </i>
            </div>
            <div class={styles.col}>
              <i>{$t("table18")}：</i>
              <i>{getTimeByZone(userFormState.created as string)}</i>
            </div>
          </div>
        </div>
        <div class={styles.custom_info_wrap}>
          <s-title>{$t("base.customInfo")}</s-title>

          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table107")}：</i>
              <i>{selectDictLabel(userSexMap, userFormState.sex)}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("table1")}：</i>
              <i>{userFormState.age}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("table86")}：</i>
              <i>{userFormState.birthday}</i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table109")}：</i>
              <i>{userFormState.constellation}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("table108")}：</i>
              <i>{userFormState.height ? userFormState.height + "cm" : null}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("table110")}：</i>
              <i>{userFormState.weight ? userFormState.weight + "kg" : null}</i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table85")}：</i>
              <i>
                {userFormState.socialAccountType}/{userFormState.social_account}
              </i>
            </div>
            <div class={styles.col}>
              <i>{$t("table9")}：</i>
              <i> {userFormState.friendNum}</i>
            </div>
            <div class={styles.col}>
              <i>{$t("table10")}：</i>
              <i>{userFormState.clubNum}</i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table5")}：</i>
              <i>
                {selectDictLabel(
                  arrayToOptions(dicts.value.memberType, {
                    label: "name",
                    value: "id",
                  }),
                  userFormState.vip_level
                )}
              </i>
            </div>
            <div class={styles.col}>
              <i>{$t("table7")}：</i>
              <i>
                {selectDictLabel(
                  arrayToOptions(dicts.value.scoreLevel, {
                    label: "name",
                    value: "id",
                  }),
                  userFormState.score_level
                )}
              </i>
            </div>
            <div class={styles.col}>
              <i>{$t("table11")}：</i>
              <i>{userFormState.partyNum}</i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table6")}：</i>
              <i>
                {selectDictLabel(
                  arrayToOptions(dicts.value.popularLevel, {
                    label: "name",
                    value: "id",
                  }),
                  userFormState.popular_level
                )}
              </i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col} style="display: flex">
              <i>{$t("table113")}：</i>
              <span style="display: flex;column-gap: 5px;flex-wrap: wrap;">
                {userFormState.places?.map((item: any) => (
                  <span
                    class={`flag-icon flag-icon-${item.toLowerCase()}`}
                  ></span>
                ))}
              </span>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table88")}：</i>
              <i>{userFormState.bio}</i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={[styles.video_wrap, styles.col]}>
              <i>{$t("table82")}：</i>
              <video-player v-model={userFormState.video} />
            </div>
          </div>
        </div>
        <div class={styles.custom_equity_wrap}>
          <s-title>{$t("base.customEquity")}</s-title>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table5")}：</i>
              <i>
                {selectDictLabel(
                  arrayToOptions(dicts.value.memberType, {
                    label: "name",
                    value: "id",
                  }),
                  userFormState.vip_level
                )}
              </i>
            </div>
            <div class={styles.col}>
              <i>{$t("table6")}：</i>
              <i>
                {selectDictLabel(
                  arrayToOptions(dicts.value.popularLevel, {
                    label: "name",
                    value: "id",
                  }),
                  userFormState.popular_level
                )}
              </i>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.col}>
              <i>{$t("table7")}：</i>
              <i>
                {selectDictLabel(
                  arrayToOptions(dicts.value.scoreLevel, {
                    label: "name",
                    value: "id",
                  }),
                  userFormState.score_level
                )}
              </i>
            </div>
          </div>
        </div>
        <div class={styles.world_wall_wrap}>
          <s-title>{$t("base.worldWall")}</s-title>

          {userFormState?.dynamics?.length
            ? userFormState.dynamics.map((dynamicItem: any) => {
                return (
                  <div class={styles.world_wall_item}>
                    <div class={styles.auth}>
                      {selectDictLabel(userPowerMap, dynamicItem.auth)}
                    </div>
                    <div class={styles.content_wrap}>
                      <div class={styles.scroll}>
                        {dynamicItem?.picture?.length ? (
                          <div class={styles.Flex}>
                            {dynamicItem.picture.map(
                              (url: string | undefined, index: number) => (
                                <a-col class={styles.col}>
                                  <a-image
                                    class={styles.img}
                                    src={url}
                                    onClick={() =>
                                      $preview(index, dynamicItem.picture)
                                    }
                                    preview={false}
                                  />
                                </a-col>
                              )
                            )}
                          </div>
                        ) : (
                          <video-player v-model={dynamicItem.video} />
                        )}
                      </div>
                      <div class={styles.describe}>{dynamicItem.content}</div>
                    </div>
                    <div class={styles.position}>{dynamicItem.location}</div>
                    <div class={styles.time}>
                      {getTimeByZone(dynamicItem.created_at)}
                    </div>
                  </div>
                );
              })
            : null}
        </div>
      </>
    );
  },
});
